<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>家谱浏览 - 家族树</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <link rel="stylesheet" href="styles.css">
    <style>
        body {
            font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
            background-color: #f8f8f8;
            color: #333;
            margin: 0;
            padding: 0;
            padding-bottom: 83px; /* 为底部导航栏留出空间 */
        }
        
        /* 状态栏样式 */
        .status-bar {
            height: 44px;
            background-color: #ffffff;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 16px;
            position: sticky;
            top: 0;
            z-index: 100;
            border-bottom: 1px solid #f0f0f0;
        }
        
        /* 顶部导航栏 */
        .top-nav {
            background-color: #ffffff;
            padding: 12px 16px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid #f0f0f0;
        }
        
        /* 底部导航栏样式 */
        .tab-bar {
            height: 83px;
            background-color: #ffffff;
            display: flex;
            justify-content: space-around;
            align-items: center;
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            border-top: 1px solid #f0f0f0;
            padding-bottom: 20px; /* 适配iPhone底部安全区域 */
        }
        
        .tab-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            color: #999;
            font-size: 10px;
            padding: 8px 0;
        }
        
        .tab-item.active {
            color: #e86c60; /* 主题色 */
        }
        
        .tab-icon {
            font-size: 22px;
            margin-bottom: 4px;
        }
        
        /* 家谱树样式 */
        .family-tree-container {
            padding: 20px;
            overflow-x: auto;
            min-height: 500px;
        }
        
        .tree {
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        
        .tree-node {
            display: flex;
            flex-direction: column;
            align-items: center;
            position: relative;
        }
        
        .node-content {
            display: flex;
            flex-direction: column;
            align-items: center;
            background-color: white;
            border-radius: 12px;
            padding: 12px;
            margin: 10px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            width: 100px;
            position: relative;
            z-index: 2;
        }
        
        .node-avatar {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            object-fit: cover;
            margin-bottom: 8px;
            border: 2px solid #e86c60;
        }
        
        .node-name {
            font-weight: 600;
            font-size: 14px;
            margin-bottom: 4px;
            text-align: center;
        }
        
        .node-info {
            font-size: 12px;
            color: #666;
            text-align: center;
        }
        
        .tree-children {
            display: flex;
            position: relative;
        }
        
        .tree-children::before {
            content: '';
            position: absolute;
            top: -20px;
            left: 50%;
            width: 2px;
            height: 20px;
            background-color: #e86c60;
            z-index: 1;
        }
        
        .tree-children .tree-node:not(:first-child)::before {
            content: '';
            position: absolute;
            top: -20px;
            left: 0;
            width: 100%;
            height: 2px;
            background-color: #e86c60;
            z-index: 1;
        }
        
        .tree-children .tree-node:first-child::before {
            content: '';
            position: absolute;
            top: -20px;
            left: 50%;
            width: 50%;
            height: 2px;
            background-color: #e86c60;
            z-index: 1;
        }
        
        .tree-children .tree-node:last-child::before {
            content: '';
            position: absolute;
            top: -20px;
            right: 50%;
            width: 50%;
            height: 2px;
            background-color: #e86c60;
            z-index: 1;
        }
        
        /* 工具栏样式 */
        .toolbar {
            display: flex;
            justify-content: space-between;
            padding: 12px 16px;
            background-color: white;
            border-bottom: 1px solid #f0f0f0;
        }
        
        .tool-button {
            display: flex;
            flex-direction: column;
            align-items: center;
            font-size: 12px;
            color: #666;
        }
        
        .tool-icon {
            font-size: 20px;
            margin-bottom: 4px;
            color: #e86c60;
        }
        
        /* 搜索框样式 */
        .search-bar {
            background-color: #f0f0f0;
            border-radius: 20px;
            padding: 8px 16px;
            display: flex;
            align-items: center;
            margin-right: 12px;
            flex: 1;
        }
        
        .search-icon {
            color: #999;
            margin-right: 8px;
        }
        
        .search-input {
            background: transparent;
            border: none;
            outline: none;
            font-size: 14px;
            flex: 1;
        }
        
        /* 标签切换样式 */
        .tabs {
            display: flex;
            background-color: white;
            border-bottom: 1px solid #f0f0f0;
        }
        
        .tab {
            flex: 1;
            text-align: center;
            padding: 12px 0;
            font-size: 14px;
            color: #666;
            position: relative;
        }
        
        .tab.active {
            color: #e86c60;
            font-weight: 600;
        }
        
        .tab.active::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 25%;
            width: 50%;
            height: 3px;
            background-color: #e86c60;
            border-radius: 3px;
        }
    </style>
</head>
<body>
    <!-- iOS状态栏 -->
    <div class="status-bar">
        <div class="time font-medium">9:41</div>
        <div class="icons flex">
            <i class="fas fa-signal mr-1"></i>
            <i class="fas fa-wifi mr-1"></i>
            <i class="fas fa-battery-full"></i>
        </div>
    </div>
    
    <!-- 顶部导航栏 -->
    <div class="top-nav">
        <div class="search-bar">
            <i class="fas fa-search search-icon"></i>
            <input type="text" class="search-input" placeholder="搜索家族成员...">
        </div>
        <a href="genealogy_chart.html" class="text-gray-800">
            <i class="fas fa-chart-network text-xl"></i>
        </a>
    </div>
    
    <!-- 标签切换 -->
    <div class="tabs scroll-container-x scroll-hidden">
        <div class="tab active">家族树</div>
        <div class="tab">成员列表</div>
        <div class="tab">分支</div>
    </div>
    
    <!-- 工具栏 -->
    <div class="toolbar scroll-container-x scroll-hidden">
        <div class="tool-button">
            <a href="member_entry.html" class="flex flex-col items-center text-gray-600">
                <i class="tool-icon fas fa-plus-circle"></i>
                <span>添加成员</span>
            </a>
        </div>
        <div class="tool-button">
            <i class="tool-icon fas fa-edit"></i>
            <span>编辑</span>
        </div>
        <div class="tool-button">
            <i class="tool-icon fas fa-share-alt"></i>
            <span>分享</span>
        </div>
        <div class="tool-button">
            <i class="tool-icon fas fa-file-export"></i>
            <span>导出</span>
        </div>
        <div class="tool-button">
            <i class="tool-icon fas fa-cog"></i>
            <span>设置</span>
        </div>
    </div>
    
    <!-- 家谱树 -->
    <div class="family-tree-container scroll-container-x">
        <div class="tree">
            <!-- 第一代 -->
            <div class="tree-node">
                <div class="node-content">
                    <img src="https://images.unsplash.com/photo-1566616213894-2d4e1baee5d8?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="祖父" class="node-avatar">
                    <div class="node-name">张大山</div>
                    <div class="node-info">1925-2005</div>
                </div>
                
                <!-- 第二代 -->
                <div class="tree-children">
                    <div class="tree-node">
                        <div class="node-content">
                            <img src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="父亲" class="node-avatar">
                            <div class="node-name">张建国</div>
                            <div class="node-info">1950-</div>
                        </div>
                        
                        <!-- 第三代 -->
                        <div class="tree-children">
                            <div class="tree-node">
                                <div class="node-content">
                                    <img src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="儿子" class="node-avatar">
                                    <div class="node-name">张明</div>
                                    <div class="node-info">1975-</div>
                                </div>
                                
                                <!-- 第四代 -->
                                <div class="tree-children">
                                    <div class="tree-node">
                                        <div class="node-content">
                                            <img src="https://images.unsplash.com/photo-1555952517-2e8e729e0b44?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="孙子" class="node-avatar">
                                            <div class="node-name">张小明</div>
                                            <div class="node-info">2000-</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="tree-node">
                                <div class="node-content">
                                    <img src="https://images.unsplash.com/photo-1599566150163-29194dcaad36?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="儿子" class="node-avatar">
                                    <div class="node-name">张强</div>
                                    <div class="node-info">1978-</div>
                                </div>
                                
                                <!-- 第四代 -->
                                <div class="tree-children">
                                    <div class="tree-node">
                                        <div class="node-content">
                                            <img src="https://images.unsplash.com/photo-1599140781162-68659a79e313?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="孙女" class="node-avatar">
                                            <div class="node-name">张丽丽</div>
                                            <div class="node-info">2005-</div>
                                        </div>
                                    </div>
                                    <div class="tree-node">
                                        <div class="node-content">
                                            <img src="https://images.unsplash.com/photo-1601412436009-d964bd02edbc?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="孙子" class="node-avatar">
                                            <div class="node-name">张小强</div>
                                            <div class="node-info">2008-</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="tree-node">
                        <div class="node-content">
                            <img src="https://images.unsplash.com/photo-1546456073-92b9f0a8d413?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="叔叔" class="node-avatar">
                            <div class="node-name">张建军</div>
                            <div class="node-info">1955-</div>
                        </div>
                        
                        <!-- 第三代 -->
                        <div class="tree-children">
                            <div class="tree-node">
                                <div class="node-content">
                                    <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="堂兄" class="node-avatar">
                                    <div class="node-name">张伟</div>
                                    <div class="node-info">1980-</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 底部导航栏 -->
    <div class="tab-bar">
        <a href="home.html" class="tab-item">
            <i class="tab-icon fas fa-home"></i>
            <span>首页</span>
        </a>
        <a href="family_tree.html" class="tab-item active">
            <i class="tab-icon fas fa-sitemap"></i>
            <span>家谱</span>
        </a>
        <a href="family_activity.html" class="tab-item">
            <i class="tab-icon fas fa-calendar-alt"></i>
            <span>活动</span>
        </a>
        <a href="family_stories.html" class="tab-item">
            <i class="tab-icon fas fa-book"></i>
            <span>故事</span>
        </a>
        <a href="profile.html" class="tab-item">
            <i class="tab-icon fas fa-user"></i>
            <span>我的</span>
        </a>
    </div>
</body>
</html> 